<template>
    <div class="panl_box">
        <!-- 正在进行中 -->
        <ul class="list_box">
            <li class="item_title">
                <h3>正在进行中</h3>
                <p>{{runings.length}}</p>
            </li>
            <li v-for="(value,index) in runings" @click='$emit("runToEnd",index)' :key="index">
                <input type="checkbox">
                {{value}}
            </li>
        </ul>
        <!-- 已经完成的 -->
        <ul class="list_box box_black">
            <li class="item_title">
                <h3>已经完成的</h3>
                <p>{{ends.length}}</p>
            </li>
            <li v-for="(value,index) in ends" @click='$emit("endToRun",index)' :key="index">
                <input type="checkbox" checked>
                {{value}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['runings','ends'],
}
</script>
<style scoped>
*{margin: 0;padding: 0;}
.list_box{
    overflow: hidden;
}
.list_box li{
    border-radius: 4px;
    list-style: none;
    background: #ffffff;
    max-width: 50%;
    margin: 10px auto;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
}
.list_box li input{
    margin-left: 20px;
}
.panl_box{
    background: #cccccc;
    padding-top: 50px;
}
.item_title{
    display: flex;
    justify-content: space-between;
}
h3{
    width: 20%;
    background: black;
    color: #ffffff;
    text-align: center;
    font-size: 18px;
}
p{
    width: 30px;
    background: plum;
    text-align: center;
    font-size: 18px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bolder;
}
.box_black li{
    background: rgba(40,40,40,0.5);
}
.box_black p{
    background: greenyellow;
}
</style>